<template>
  <div class="common_login_body">
    <div class="common_login_section">
      <div class="common_login_top">
        <i class="common_top_logo"></i>
      </div>
      <div class="common_main">
        <!--下面的内容自由发挥-->
        <ul id="input_list">
          <li>
            <span><i class="iconfont icon-qc-required"></i>手机号</span>
            <input type="number" :placeholder="phone_holder" autocomplete="off" v-model="phone" :class="{'error':!phoneCheck}">
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>验证码</span>
            <input id="yzm" type="number" :placeholder="yzm_holder" autocomplete="off" v-model="yzm" :class="{'error':!yzmCheck}">
            <button id="yzm_btn" @click="getYzm">{{yzm_text}}</button>
          </li>
          <li>
            <span><i class="iconfont icon-qc-required"></i>密码</span>
            <input type="password" :placeholder="pwd_holder" autocomplete="off" v-model="pwd" :class="{'error':!pwdCheck}">
          </li>
        </ul>
        <p id="link_list">
          <span>已有账号，<a @click="linkTOlogin">立即登录</a></span>
        </p>
        <!--按钮也是公共的-->
        <button class="common_login_btn" @click="login">确认并登录</button>
        <!------------------->
      </div>
    </div>
    <!--tankuang -->
    <div class="tankuang_box" v-if="tankuangISshow">
      <div class="tankuang">
        <p class="tankuangMSG">{{tankuangMSG}}</p>
        <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
  import lu from '@/assets/public.js'
  import { Toast } from 'mint-ui';
  export default {
    name: 'login',
    data () {
      return {
        phone:'',
        phone_holder:'请输入手机号',
        phoneCheck:true,
        yzm:'',
        yzm_holder: '请输入验证码',
        yzmCheck:true,
        yzm_text:'获取验证码',
        pwd:'',
        pwd_holder: '请输入密码',
        pwdCheck:true,
        tankuangISshow:false,
        tankuangMSG:'',
        Interval:'',
        seconds:60,
        yzmISclick:false
      }
    },
    methods: {
      tankuangISshowBTN(){
        this.tankuangISshow = false
      },
      /*跳转到登录*/
      linkTOlogin () {
        this.$router.push({
          path: '/login',
          name: 'login',
          params: {
            name: 'login'
          }
        })
      },
      login () {
        if(!this.phone){
          this. phoneCheck = false
          this.phone_holder = '手机号不得为空'
          return
        }else if(!this.yzm) {
          this.yzmCheck = false
          this.yzm_holder = '验证码不得为空'
          return
        }else if(!this.pwd) {
          this.pwdCheck = false
          this.pwd_holder = '密码不得为空'
          return
        }

        if(!lu.regCheck(this.phone,/^1[3457869]{1}\d{9}$/)){
          this.phone = ''
          this.phoneCheck = false
          this.phone_holder = '请输入正确的手机号'
          return
        }else if(!lu.regCheck(this.pwd,/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,30}$/)){
          this.pwd = ''
          this.pwdCheck = false
          this.pwd_holder = '6-30位包含字母和数字'
          return
        }
        this.axios.post('/index/reset_pass',{
          user_phone:this.phone,
          password:this.pwd,
          code:this.yzm
        }).then((res)=>{
          clearInterval(this.Interval)
          this.yzm_text = '获取验证码'
          this.yzmISclick = false
          if(res.data.code==1){
            this.$router.push({
              path: '/login',
              name: 'login',
              params: {
                name: 'login'
              }
            })
          }else{
            this.tankuangMSG = res.data.msg
            this.tankuangISshow = true
          }
        })
      },
//      获取验证码
      getYzm () {
        if(this.yzmISclick)return
        if(!this.phone){
          this.phoneCheck = false
          this.phone_holder = '手机号不得为空'
        }else{
          if(!lu.regCheck(this.phone,/^1[3457869]{1}\d{9}$/)){
            this.phone = ''
            this.phoneCheck = false
            this.phone_holder = '请输入正确的手机号'
            return
          }
          let that = this
          this.yzmISclick = true
          this.axios.get('/index/get_code?situation=2&phone='+this.phone).then((res)=>{
            if(res.data.code==0){
              Toast(res.data.msg)
              return
            }
            this.Interval = setInterval(function(){
              that.seconds = that.seconds - 1
              if(that.seconds<=0){
                clearInterval(that.Interval)
                this.yzmISclick = false
              }else{
                that.yzm_text = that.seconds+'s'
              }
            },1000)
          })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_6g1sjwpn827.css';
  .common_login_section{
    height:480px;
  }
  #input_list{
    width:396px;
    margin:40px auto 0;
  }
  #input_list li{
    height:40px;
    display: flex;
    align-items: center;
    margin-bottom:16px;
    box-sizing: border-box;
  }
  #input_list span{
    font-size:14px;
    color: #666;
    display: inline-block;
    width:100px;
    text-align: right;
    padding-right:10px;
  }
  #input_list span i{
    color: #ff0000;
  }
  #input_list input{
    display: inline-block;
    vertical-align: middle;
    width:296px;
    height:40px;
    outline: none;
    border: 1px solid #ddd;
    font-size:15px;
    color: #444444;
    background-color: transparent;
    padding:0 0 0 10px;
    box-sizing: border-box;
  }
  #yzm{
    width:186px!important;
  }
  #yzm_btn{
    width:97px;
    height:36px;
    background-color: #2377BA;
    color:#fff;
    font-size:15px;
    margin-left:11px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
  }
  .common_login_btn{
    margin-top:40px;
  }

  #link_list{
    width:416px;
    margin:0 auto;
    text-align: center;
  }
  #link_list>span{
    color: #666;
    font-size:11px;
    display: inline-block;
    line-height: 30px;
  }
  #link_list>span>a{
    color: #2377BA;
    font-size:11px;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
  }
</style>
